<template>
	<div>二次封装ui组件暴漏内部方法</div>
	<el-input ref="inputRef" v-bind="$attrs">
		<template v-for="(_, slot) in $slots" :key="slot" #[slot]="slotProps">
			<slot :name="slot" v-bind="slotProps"></slot>
		</template>
	</el-input>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElInput, InputInstance } from 'element-plus';

// 定义自定义方法的接口
interface ExposedMethods {
	customMethod: () => void;
}

// 组件实例的引用
const inputRef = ref<InputInstance | null>(null);

// 定义组件名称
defineOptions({ name: 'MvInput' });

// 自定义方法
const customMethod = () => {
	console.log('Custom method called');
};

// 使用 defineExpose 暴露方法
defineExpose(
	new Proxy(
		{
			customMethod,
		},
		{
			get(target, key) {
				if (key in target) {
					return target[key as keyof ExposedMethods];
				}
				return inputRef.value?.[key as keyof InputInstance];
			},
			has(target, key) {
				return key in target || (inputRef.value ? key in inputRef.value : false);
			},
		}
	) as ExposedMethods & InputInstance
);
</script>
